<template>
	<div class="business-user">
		<!-- left -->
		<div class="fl"><ShopListMenu :has-select-all-button="true" :has-headquarters="true" title="组织架构" @emitShopId="emitShopId" /></div>

		<!-- right -->
		<div class="right app-main-content-box">
			<transition name="el-fade-in-linear">
				<user-list
					v-if="tabName === 'user' && moduleType === 'list'"
					ref="userList"
					:shop-id="shopId"
					:shop-name="shopName"
					:cur-select-label="curSelectLabel"
					@changeShowType="changeShowType"
				/>
			</transition>
			<transition name="el-fade-in">
				<user-approve
					v-if="moduleType === 'approve'"
					ref="userApprove"
					:shop-id="shopId"
					:shop-name="shopName"
					:cur-select-label="curSelectLabel"
					@changeShowType="changeShowType"
				/>
			</transition>
		</div>
	</div>
</template>

<script>
import UserList from './components/UserList';
import UserApprove from './components/UserApprove';
import { mapActions } from 'vuex';
export default {
	components: {
		UserList,
		UserApprove
	},
	props: {
		business: {},
		tabName: {
			type: String,
			require: true
		}
	},
	data() {
		return {
			// 配置
			moduleType: 'list', // 当前显示默认list  approve
			// 数据
			shopId: null,
			shopName: '',
			curSelectLabel: ''
		};
	},
	watch: {
		tabName(val) {
			if (val === 'user') {
				this.moduleType = 'list';
			}
		}
	},
	mounted() {
		this.getActiveMaIsOnline();
	},
	methods: {
		/**
		 * 获取数据
		 */
		// 获取小程序是否上线
		...mapActions(['getAuthMa']),
		getActiveMaIsOnline() {
			this.getAuthMa();
		},

		/**
		 * 按钮组
		 */
		// 选择门店
		emitShopId(item) {
			this.shopId = item.shopId;
			this.shopName = item.shopName;
			this.curSelectLabel = item.shopId !== -1 ? item.shopName : '全部员工';
		},

		// 切换表格显示
		changeShowType() {
			this.moduleType = this.moduleType === 'list' ? 'approve' : 'list';
		}
	}
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
/* 左侧组织 */
.left {
	float: left;
	margin-right: 10px;
	padding: 24px 30px 24px 15px;
	border-radius: 5px;
	background-color: #fff;
	.title {
		margin-bottom: 24px;
		padding-left: 15px;
		font-size: 20px;
		font-weight: bold;
	}
}
/* 右侧表格 */
.right {
	overflow: hidden;
}
</style>
